<template>
	<view>
		<u-navbar :is-back="false" title="会员中心" :border-bottom="true" :background="{background:'#39cccc'}">
			<view class="u-flex u-row-right" style="width: 100%;">
				  
			</view>
		</u-navbar>
		<view class="u-flex user-box u-p-20">
			<view class="u-m-r-10 uploadBody">
				<u-upload 
				ref = "upload"
				:show-progress="false"
				:action="action"
				max-count="1"
				width="140"
				height="140"
				:form-data="formData"
				:preview-full-image="false"
				:multiple="false"
				:deletable="false"
				:before-upload="beforeUpload"
				:custom-btn="true"
				@on-success="upsuccess"
				>
				 <u-avatar slot="addBtn" :src="dm_user.avatar_url" size="140"></u-avatar>
				</u-upload>
				
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{dm_user.name}}</view>
				<view class="u-font-14 u-tips-color">邮箱:{{dm_user.email}}</view>
			</view>
			 
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="个人信息" @click="toBaseInfo"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="rmb-circle" title="订单"></u-cell-item>
				<u-cell-item icon="star" title="收藏"></u-cell-item>
				<u-cell-item icon="map" title="地址"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="reload" title="退出登录" @click="logout"></u-cell-item>
			</u-cell-group>
		</view>
		
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:"",
				formData:{},
				uPfileName:""
			}
		},
		onLoad() {
			
		},
		mounted() {
			if(!this.dm_token){
				this.$u.toast("请登陆");
				uni.setStorageSync("prevPage","/pages/center/center");
				setTimeout(()=>{
					this.$u.route({
						type:"redirect",
						url:"/pages/center/login"
					})
				},1500)
			}
		},
		methods: {
			toBaseInfo(){
				this.$u.route({
					url:"pages/center/baseInfo"
				})
			},
			async logout(){
				await this.$u.api.logout();
				this.$u.route({
					type:"reLaunch",
					url:"/pages/index/index"
				})
				
				this.$u.vuex("dm_token","")
				this.$u.vuex("dm_user",{})
			},
			async beforeUpload(index,files){
				
				const {file} = files[0];
				console.log(file);
				// #ifdef H5
				const fileName = file.name;
				// #endif
				
				// #ifndef H5
				const fileName = file.path;
				// #endif
				
				const suffix = fileName.slice(fileName.lastIndexOf("."))
				const uPfileName = this.$u.guid(20)+suffix
				this.uPfileName = uPfileName
				
				const ossToken = await this.$u.api.ossToken();
				
				this.action = ossToken.host;
				console.log(this.action);
				this.formData = {
					'key' : uPfileName,
					'policy': ossToken.policy,
					'OSSAccessKeyId': ossToken.accessid, 
					'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
					'signature': ossToken.signature,
				}
				return true;
			},
			async upsuccess(){
				 
				await this.$u.api.updateAvatar({avatar:this.uPfileName})
				const userInfo = await this.$u.api.userInfo();
				this.$refs.upload.remove(0)
				this.$u.vuex("dm_user",userInfo);
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}


.user-box{
	background-color: #fff;
}

.uploadBody{
	width: 140rpx;
	height: 140rpx;
	 
}
</style>
